<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线编译器</title>

    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Roboto:wght@400;700&display=swap"
        rel="stylesheet">

    <!-- Bootstrap CSS (for navbar styling) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- 引入 Ace Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        /* 导航栏样式 */
        .navbar {
            width: 100%;
            background-color: #fff;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            letter-spacing: 0.5px;
        }

        .navbar a {
            text-decoration: none;
            color: #333;
            margin-left: 15px;
            font-size: 16px;
            position: relative;
        }

        .navbar a:hover {
            color: #4CAF50;
        }

        .navbar a::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #4CAF50;
            transition: width .3s;
            position: absolute;
            bottom: -5px;
            left: 0;
        }

        .navbar a:hover::after {
            width: 100%;
        }

        .navbar .logo {
            font-size: 24px;
            font-weight: 700;
            color: #4CAF50;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-right: auto;
        }

        /* 内容容器样式 */
        .container {
            margin-top: 80px;
            /* 避免内容被导航栏遮挡 */
        }

        #editor {
            height: 300px;
            width: 100%;
            margin-top: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .output {
            text-align: left;
            padding: 15px;
            background-color: #fff;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin-top: 20px;
        }

        .output pre {
            margin-bottom: 0;
        }

        .output h3 {
            margin-bottom: 10px;
        }

        .button-container {
            display: flex;
            justify-content: flex-start;
            margin-top: 10px;
        }

        #runButton {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 10px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        #runButton:hover {
            background-color: #45a049;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                align-items: center;
            }

            .navbar a {
                margin: 10px 0;
            }

            .navbar .menu-toggle {
                display: block;
                cursor: pointer;
            }

            .navbar a {
                display: none;
                width: 100%;
            }

            .navbar.active a {
                display: block;
                text-align: center;
                padding: 10px 0;
                margin: 0;
                border-bottom: 1px solid #ddd;
            }
        }
    </style>
</head>

<body>
    <div class="navbar">
        <span class="logo">OJ Platform☰</span>
        <a href="/bch">首页</a>
    </div>

    <div class="container">
        <h2>在线编译器</h2>
        <div id="editor"></div>

        <div class="button-container">
            <button id="runButton">运行代码</button>
        </div>

        <div class="output mt-3" id="output">
            <h3>运行结果：</h3>
            <pre id="stdout"></pre>
            <pre id="stderr"></pre>
            <div id="status"></div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var editor = ace.edit("editor");
            editor.setTheme("ace/theme/chrome");
            editor.getSession().setMode("ace/mode/javascript");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });

            $('#runButton').click(function () {
                var code = editor.getValue();
                runCode(code);
            });

            function runCode(code) {
                var formData = { code: code };

                $.ajax({
                    type: 'POST',
                    url: '/compile', // Replace with your backend URL for compilation
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function (response) {
                        // 直接处理响应数据，无需再次检查 status
                        $('#stdout').text(response.stdout);
                        $('#stderr').text(response.stderr);
                        $('#status').text('状态码: ' + response.status + ', 描述: ' + response.reason);
                    },
                    error: function (xhr) {
                        $('#stdout').text('');
                        $('#stderr').text('');

                        if (xhr.responseText) {
                            // 判断返回的 Content-Type 是 application/json 还是 text/plain
                            var contentType = xhr.getResponseHeader('Content-Type');
                            if (contentType && contentType.indexOf("application/json") !== -1) {
                                // 如果是 JSON 格式，尝试解析并显示详细信息
                                var jsonResponse = JSON.parse(xhr.responseText);
                                $('#status').text('发生错误: ' + xhr.status + ' - ' + (jsonResponse.reason || '未知错误'));
                            } else {
                                // 否则直接显示文本错误信息
                                $('#status').text('发生错误: ' + xhr.status + ' - ' + xhr.responseText);
                            }
                        } else {
                            $('#status').text('发生错误: ' + xhr.status + ' - ' + xhr.statusText);
                        }
                    }
                });
            }

        });
    </script>

    <!-- Bootstrap JS (for navbar functionality) -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"
        integrity="sha384-b4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+Wy2vRM2PnQhz4z3PlQ/nmN0FkM9aZQ8jBh"
        crossorigin="anonymous"></script>
</body>

</html>